/*
 * PlateTableView 反应板表格
 */
import QtQuick 2.14
import QtQuick.Controls 2.14
import Qt.labs.qmlmodels 1.0
import QtGraphicalEffects 1.14
import PlateTableAbstractModel 1.0

Item {
    id: root

    /* property 定义开始 */
    property int plateRowCount: 8 // 反应板行数
    property int plateColCount: 12 // 反应板列数
    // 字母表
    property var alphabetList: ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"]
    // 横向表头高
    property int horizontalHeaderHeight: 32
    // 纵向表头宽
    property int verticalHeaderWidth: 32
    // 表格数据
    // property var tableData: {
    //     A: `{type: "U", sample: "Sample1", dyes: ["F", "V", "R"]}`;
    //     B: `{type: "U", sample: "Sample1", dyes: ["F", "V"]}`;
    //     C: `{type: "U", sample: "Sample2", dyes: ["F", "V", "R"]}`;
    //     D: `{type: "S", sample: "Sample1", dyes: ["F", "V", "R", "C"]}`
    // }

    // private
    property int _itemIndex: 0 // 记录每个代理对象的下表，反推出所在行列
    property var _startPoint: [-1, -1] // 记录起点坐标
    property var _endPoint: [-1, -1] // 记录终点坐标
    property bool _isPressed: false // 鼠标按下信号
    property int _curMouseRow: -1 // 鼠标当前所在行
    property int _curMouseCol: -1 // 鼠标当前所在列

    // 信号
    signal pressedIndex(int index) // 发送表格下标信号

    // 函数
    // 下标转行列
    function index2RowCol(index){
        return [parseInt(index / plateColCount), index % plateColCount]
    }

    // 行列转下标
    function rowCol2Index(row, col){
        return row * plateColCount + col
    }

    /* property 定义结束 */

    Rectangle {
        id: table
        anchors.fill: parent
        color: "#80FFFFFF"
        clip: true
        border.width: 1
        border.color: "transparent"

        layer.enabled: true
        layer.effect: OpacityMask {
            maskSource: Rectangle {
                width: root.width
                height: root.height
                radius: 12
            }
        }

        // 横向表头
        Item {
            id: horizontalHeader
            height: horizontalHeaderHeight
            anchors.left: parent.left
            anchors.right: parent.right
            anchors.leftMargin: verticalHeaderWidth

            Row {
                spacing: 0

                Repeater {
                    model: plateColCount

                    Rectangle {
                        width: horizontalHeader.width / plateColCount
                        height: horizontalHeader.height
                        color: "transparent"
                        border.color: "#fff"
                        border.width: 0

                        Text {
                            text: qsTr((index+1).toString())
                            anchors.centerIn: parent
                            font.pixelSize: 16
                            font.family: "Alibaba PuHuiTi"
                            color: "#fff"
                        }

                        // 画左边框
                        Canvas {
                            anchors.fill: parent
                            onPaint: {
                                var ctx = getContext("2d")
                                ctx.strokeStyle = "#FFF"
                                ctx.lineWidth = 2
                                ctx.moveTo(0, 0)
                                ctx.lineTo(0, height)
                                ctx.stroke()
                            }
                        }
                    }
                }
            }
        }

        // 纵向表头
        Item {
            id: verticalHeader
            width: verticalHeaderWidth
            anchors.top: parent.top
            anchors.bottom: parent.bottom
            anchors.topMargin: horizontalHeaderHeight

            Column {
                spacing: 0

                Repeater {
                    model: plateRowCount

                    Rectangle {
                        width: verticalHeader.width
                        height: verticalHeader.height / plateRowCount
                        color: "transparent"
                        border.color: "#fff"
                        border.width: 0

                        Text {
                            text: qsTr(alphabetList[index])
                            anchors.centerIn: parent
                            font.pixelSize: 16
                            font.family: "Alibaba PuHuiTi"
                            color: "#fff"
                        }

                        // 画上边框
                        Canvas {
                            anchors.fill: parent
                            onPaint: {
                                var ctx = getContext("2d")
                                ctx.strokeStyle = "#FFF"
                                ctx.lineWidth = 2
                                ctx.moveTo(0, 0)
                                ctx.lineTo(width, 0)
                                ctx.stroke()
                            }
                        }
                    }
                }
            }
        }

        // 表格内容
        TableView {
            id: tableContent
            anchors {
                fill: table
                leftMargin: verticalHeaderWidth
                topMargin: horizontalHeaderHeight
            }
            contentWidth: parent.width
            contentHeight: parent.height
            clip: true
            interactive: false // 取消轻抚
            boundsBehavior: Flickable.StopAtBounds
            columnSpacing: 0
            rowSpacing: 0

            columnWidthProvider: function(column){
                return (table.width - verticalHeaderWidth) / plateColCount
            }

            rowHeightProvider: function(row){
                return (table.height - horizontalHeaderHeight) / plateRowCount
            }

            onWidthChanged: {
                forceLayout() // 强制重新布局刷新视图
            }

            onHeightChanged: {
                forceLayout() // 强制重新布局刷新视图
            }

            model: TableModel {
                id: tableModel

                TableModelColumn {display: "A"}
                TableModelColumn {display: "B"}
                TableModelColumn {display: "C"}
                TableModelColumn {display: "D"}
            }

            delegate: Rectangle{
                id: tableDelegate
                color: "transparent"
                implicitWidth: tableContent.columnWidthProvider(0)
                implicitHeight: tableContent.rowHeightProvider(0)
                border.width: 0
                border.color: "#FFF"
                clip: true

                PlateTableItem {
                    id: tableItem
                    anchors.fill: parent
                    Component.onCompleted: {
                        selfItemIndex = root._itemIndex++ // 记录代理下标
                        // 数据处理
                        analyseItemData(display)
                    }

                    Connections {
                        target: root
                        function onPressedIndex(index){
                            if(index === tableItem.selfItemIndex)
                                console.log(index)
                        }
                    }
                }

                // 画边框
                Canvas {
                    anchors.fill: parent
                    onPaint: {
                        var ctx = getContext("2d")
                        ctx.strokeStyle = "#FFF"
                        ctx.lineWidth = 2
                        // 右边边框
                        ctx.moveTo(0, 0)
                        ctx.lineTo(0, height)
                        ctx.stroke()
                        // 上边边框
                        ctx.moveTo(0, 0)
                        ctx.lineTo(width, 0)
                        ctx.stroke()
                    }
                }
            }

            MouseArea {
                anchors.fill: parent
                hoverEnabled: true
                onPressed: {
                    _curMouseRow = parseInt(mouse.x / tableContent.rowHeightProvider(0)) > plateRowCount ?
                                plateRowCount : parseInt(mouse.x / tableContent.rowHeightProvider(0))
                    _curMouseCol = parseInt(mouse.x / tableContent.columnWidthProvider(0)) > plateColCount ?
                                plateColCount : parseInt(mouse.x / tableContent.columnWidthProvider(0))
                    _startPoint = [_curMouseRow, _curMouseCol]
                    root.pressedIndex(rowCol2Index(_curMouseRow, _curMouseCol))
                    _isPressed = true
                }
                onPositionChanged: {
                    if(_isPressed){
                        _curMouseRow = parseInt(mouse.x / tableContent.rowHeightProvider(0)) > plateRowCount ?
                                    plateRowCount : parseInt(mouse.x / tableContent.rowHeightProvider(0))
                        _curMouseCol = parseInt(mouse.x / tableContent.columnWidthProvider(0)) > plateColCount ?
                                    plateColCount : parseInt(mouse.x / tableContent.columnWidthProvider(0))
                        root.pressedIndex(rowCol2Index(_curMouseRow, _curMouseCol))
                    }
                }
                onReleased: {
                    _curMouseRow = parseInt(mouse.x / tableContent.rowHeightProvider(0)) > plateRowCount ?
                                plateRowCount : parseInt(mouse.x / tableContent.rowHeightProvider(0))
                    _curMouseCol = parseInt(mouse.x / tableContent.columnWidthProvider(0)) > plateColCount ?
                                plateColCount : parseInt(mouse.x / tableContent.columnWidthProvider(0))
                    _endPoint = [_curMouseRow, _curMouseCol]
                    _isPressed = false
                }
            }
        }

        Component.onCompleted: {
            // console.log(tableDelegate.width)
            tableModel.appendRow({
                                     A: JSON.stringify({type: "U", sample: "Sample1", dyes: ["F", "V", "R"]}),
                                     B: JSON.stringify({type: "U", sample: "Sample1", dyes: ["F", "V"]}),
                                     C: JSON.stringify({type: "U", sample: "Sample2", dyes: ["F", "V", "R"]}),
                                     D: JSON.stringify({type: "S", sample: "Sample1", dyes: ["F", "V", "R", "C"]})
                                 })
            tableModel.appendRow({
                                     A: JSON.stringify({type: "U", sample: "Sample1", dyes: ["F", "V", "R"]}),
                                     B: JSON.stringify({type: "U", sample: "Sample1", dyes: ["F", "V"]}),
                                     C: JSON.stringify({type: "U", sample: "Sample2", dyes: ["F", "V", "R"]}),
                                     D: JSON.stringify({type: "S", sample: "Sample1", dyes: ["F", "V", "R", "C"]})
                                 })
            tableModel.appendRow({
                                     A: JSON.stringify({type: "U", sample: "Sample1", dyes: ["F", "V", "R"]}),
                                     B: JSON.stringify({type: "U", sample: "Sample1", dyes: ["F", "V"]}),
                                     C: JSON.stringify({type: "U", sample: "Sample2", dyes: ["F", "V", "R"]}),
                                     D: JSON.stringify({type: "S", sample: "Sample1", dyes: ["F", "V", "R", "C"]})
                                 })
            tableModel.appendRow({
                                     A: JSON.stringify({type: "U", sample: "Sample1", dyes: ["F", "V", "R"]}),
                                     B: JSON.stringify({type: "U", sample: "Sample1", dyes: ["F", "V"]}),
                                     C: JSON.stringify({type: "U", sample: "Sample2", dyes: ["F", "V", "R"]}),
                                     D: JSON.stringify({type: "S", sample: "Sample1", dyes: ["F", "V", "R", "C"]})
                                 })
            tableModel.appendRow({
                                     A: JSON.stringify({type: "U", sample: "Sample1", dyes: ["F", "V", "R"]}),
                                     B: JSON.stringify({type: "U", sample: "Sample1", dyes: ["F", "V"]}),
                                     C: JSON.stringify({type: "U", sample: "Sample2", dyes: ["F", "V", "R"]}),
                                     D: JSON.stringify({type: "S", sample: "Sample1", dyes: ["F", "V", "R", "C"]})
                                 })
            tableModel.appendRow({
                                     A: JSON.stringify({type: "U", sample: "Sample1", dyes: ["F", "V", "R"]}),
                                     B: JSON.stringify({type: "U", sample: "Sample1", dyes: ["F", "V"]}),
                                     C: JSON.stringify({type: "U", sample: "Sample2", dyes: ["F", "V", "R"]}),
                                     D: JSON.stringify({type: "S", sample: "Sample1", dyes: ["F", "V", "R", "C"]})
                                 })
        }
    }
}
